<template>
  <div id="modsort" class="menu-set">
    <fieldset class="layui-elem-field layui-field-title">
      <legend>模块排序</legend>
      <div class="layui-field-box" v-if="pageConfig[pageConfig.theme].layout == 'one'">
        <draggable :list="moddata" element="ul" v-on:end="submit" :options="{animation: 300}">
          <transition-group tag="ul" name="list-complete">
            <li class="list-complete-item" v-for="(item,index) in moddata" :key="index">{{item.config.title}}
              <!-- <a href="javascript:;" v-on:click="leftdel(index)">删除</a> -->
            </li>
          </transition-group>
        </draggable>
      </div>
      <div class="layui-field-box" v-if="pageConfig[pageConfig.theme].layout == 'two'">
        <p class="smalltit">左侧</p>
        <draggable :list="moddata" element="ul" v-on:end="submit" :options="{animation: 300}">
          <transition-group tag="ul" name="list-complete">
            <li class="list-complete-item" v-for="(item,index) in moddata" :key="index" v-if="item.belong == 'left'">{{item.config.title}}
              <!-- <a href="javascript:;" v-on:click="leftdel(index)">删除</a> -->
            </li>
          </transition-group>
        </draggable>
        <p class="smalltit">右侧</p>
        <draggable :list="moddata" element="ul" v-on:end="submit" :options="{animation: 300}">
          <transition-group tag="ul" name="list-complete">
            <li class="list-complete-item" v-for="(item,index) in moddata" :key="index" v-if="item.belong == 'right'">{{item.config.title}}
              <!-- <a href="javascript:;" v-on:click="leftdel(index)">删除</a> -->
            </li>
          </transition-group>
        </draggable>
      </div>
    </fieldset>
  </div>
</template>

<script>
  import draggable from 'vuedraggable'
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    // props: ["moddata", "pageconfig"],
    methods: {
      ...mapMutations(['setContainer']),
      submit: function () {
        this.$store.dispatch('save')
      }
    },
    computed: {
      ...mapState(['container', 'pageConfig']),
      moddata: {
        get() {
          return this.container.items;
        },
        set(value) {
          this.setContainer({
            items: value
          })
        }

      }
    },
    components: {
      draggable,
    }
  }
</script>

<style>

</style>